<template>
  <view class="custom-navbar" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
    <view class="left-btn" @click="goBack"
      ><uni-icons type="back" size="28" color="#ffffff"
    /></view>
    <view class="title">{{ title }}</view>
    <view class="right-btn"></view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

const props = defineProps<{
  title: string
}>()
// 返回首页
const goBack = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<style scoped lang="scss">
.custom-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150rpx;
  padding: 0 30rpx;
  background-color: $primary-color;
  color: white;
  position: relative;
  z-index: 10;
  box-shadow: $shadow-small;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.left-btn,
.right-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-btn:active {
  opacity: 0.8;
}
</style>
